////
/// @group avatar
////

@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "../utils";
@use "../border-radius";
@use "../theme/colors";
@use "../typography/typography";
@use "../icon/icon";

/// Set to `true` to disable all the styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable updating the icon color within avatars to inherit
/// the current color by default.
/// @type Boolean
$disable-icon: false !default;

/// Set to `true` to disable allowing the avatar to be sized as an icon.
/// @type Boolean
$disable-icon-size: false !default;

/// Set to `true` to disable the img styling when `src` or `imgProps` are
/// provided to the avatar.
/// @type Boolean
$disable-image: false !default;

/// Set to `true` to disable automatically updating all `img` elements that
/// appear in an avatar to be responsive.
/// @type Boolean
$disable-auto-image: false !default;

/// The default text color
/// @type Color
$color: colors.$grey-100 !default;

/// The default background color
/// @type Color
$background-color: colors.$grey-700 !default;

/// The default line height
/// @type Number
$line-height: map.get(typography.$subtitle-1-styles, line-height) !default;

/// The default border color
/// @type Color
$border-color: transparent !default;

/// The default border radius. If you want to make avatars be more square-like,
/// set this to something like 0.25rem.
///
/// @type Number
$border-radius: border-radius.get-var(full) !default;

/// The default height and width
/// @type Number
$size: 2.5rem !default;

/// The default font size
/// @type Number
$font-size: 1.5rem !default;

/// The default height and width when sized as an icon
/// @type Number
$icon-sized-size: icon.get-var(size) !default;

/// The default font size when sized as an avatar
/// @type Number
$icon-sized-font-size: 0.75rem !default;

/// Some reasonable defaults for the avatar colors that ensure contrast ratios
/// are accessible between the background and foreground.
/// @type Map
$default-colors: (
  red: colors.$red-a-700 colors.$red-50,
  pink: colors.$pink-600 colors.$white,
  purple: colors.$purple-700 colors.$purple-100,
  deep-purple: colors.$deep-purple-900 colors.$deep-purple-100,
  indigo: colors.$indigo-600 colors.$indigo-100,
  blue: colors.$blue-a-700 colors.$white,
  light-blue: colors.$light-blue-300 colors.$deep-purple-900,
  cyan: colors.$cyan-400 colors.$teal-900,
  teal: colors.$teal-a-400 colors.$teal-900,
  green: colors.$green-800 colors.$green-50,
  light-green: colors.$light-green-300 colors.$green-900,
  lime: colors.$lime-400 colors.$teal-800,
  yellow: colors.$yellow-a-200 colors.$brown-500,
  amber: colors.$amber-400 colors.$brown-800,
  orange: colors.$orange-600 colors.$grey-900,
  deep-orange: colors.$deep-orange-a-400 colors.$grey-900,
  brown: colors.$brown-500 colors.$brown-50,
  grey: colors.$grey-700 colors.$grey-100,
  blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
);

/// Any custom colors to create. Each key is the class name suffix for the avatar
/// and each value should be an ordered list of: `background-color color`.
///
/// This will automatically be merged with the `$default-colors` so you can
/// set any value to `null` to remove it or provide the same key with different
/// values to override.
///
/// @type Map
$custom-colors: () !default;

/// The default colors that can be created for an avatar. This can be set to an
/// empty Map to create no color styles, a completely custom map, or merge with
/// the existing.
///
/// @type Map
$colors: map.merge($default-colors, $custom-colors) !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (
  background-color,
  color,
  border-color,
  border-radius,
  size,
  font-size
);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "avatar");
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "avatar")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  #{$property}: get-var($name, $fallback);
}

/// NOTE: You will need to enforce an acceptable color contrast yourself between
/// the background and foreground colors.
///
/// @param {String} name - This will be used for the class name when
/// `$disable-prefix` is set to true, otherwise as `.rmd-avatar--${Name}`.
/// @param {Color} color - The text color to use.
/// @param {Color} background-color - The background color to use
/// @param {Boolean} disable-prefix [false] - Set to `true` to disable the
/// `.rmd-avatar--` prefix for the class name
@mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
  $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");

  #{$class-name} {
    @include set-var(background-color, $background-color);
    @include set-var(color, $color);
  }
}

/// Conditionally applies the css variables based on feature flags
@mixin variables {
  @if not $disable-everything {
    @include set-var(background-color, $background-color);
    @include set-var(color, $color);
    @include set-var(border-color, $border-color);
    @include set-var(size, $size);
    @include set-var(font-size, $font-size);
  }
}

/// Generates all the styles for the `Autocomplete` components based on feature
/// flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(avatar, $disable-layer) {
      .rmd-avatar {
        @if not $disable-icon {
          @include icon.set-var(color, currentcolor);
        }
        @include utils.map-to-styles(typography.$base-font-styles);
        @include use-var(background-color);
        @include use-var(border-radius, $fallback: $border-radius);
        @include use-var(color);
        @include use-var(font-size);
        @include use-var(height, size);
        @include use-var(width, size);

        align-items: center;
        border: 1px solid get-var(border-color);
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        line-height: $line-height;
        overflow: hidden;

        @if not $disable-icon-size {
          &--icon {
            @include set-var(size, $icon-sized-size);

            font-size: $icon-sized-font-size;
          }
        }

        @if not $disable-image {
          &__image {
            height: 100%;
            width: auto;
          }
        }

        @if not $disable-auto-image {
          img {
            height: 100%;
            width: auto;
          }
        }

        @each $name, $values in $colors {
          @if list.length($values) != 2 {
            @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
          }

          @include custom-color(
            "&--#{$name}",
            list.nth($values, 2),
            list.nth($values, 1),
            true
          );
        }
      }
    }
  }
}
